<!DOCTYPE html>
<!-- 默认的lang="en"，代表这是一个英文网站 -->
<!-- 告诉了浏览器这是一个什么语言的网站，可能会提示需不需要翻译 -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 网站的标题 -->
    <title>小米商城</title>
    <!-- 网站的logo -->
    <link rel="icon" href="img/favicon.ico"/>
    <!-- 公共的样式 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 头部、底部的样式 -->
    <link rel="stylesheet" href="css/xiaomi.css">
    <!-- 主页的核心内容样式 -->
    <link rel="stylesheet" href="css/index_content.css">
    <!-- 底部的样式 -->
    <link rel="stylesheet" href="css/footer.css">
    <!-- 右侧工具栏的样式 -->
    <link rel="stylesheet" href="css/right-tools.css">
    <!-- 字体图标样式 -->
    <link rel="stylesheet" href="css/iconfont.css">
    <!-- 引入JS-->
    <script src="js/xiaomi.js"></script>
    <script src="js/banner.js"></script>
</head>
<body>
    <!-- 语义化的标签 -->
    <!-- 名字叫做header的div元素 -->
    <!-- 头部区域开始 -->
    <header>
        <!-- 固定在中间的隐藏区域 -->
        <!-- 子元素设置浮动之后，会导致父元素高度坍塌 -->
        <!-- 子元素已经脱流 -->
        <div class="wrap">
            <ul class="header-left">
                <li><a href="">小米官网</a><span>|</span></li>
                <li><a href="">小米商城</a><span>|</span></li>
                <li><a href="">小米澎湃OS</a><span>|</span></li>
                <li><a href="">小米汽车</a><span>|</span></li>
                <li><a href="">云服务</a><span>|</span></li>
                <li><a href="">IoT</a><span>|</span></li>
                <li><a href="">有品</a><span>|</span></li>
                <li><a href="">小爱开放平台</a><span>|</span></li>
                <li><a href="">资质证照</a><span>|</span></li>
                <li><a href="">协议规则</a><span>|</span></li>
                <li class="download">
                    <a href="">下载app</a><span>|</span>
                    <div class="sanjiaoxing"></div>
                    <aside>
                        <img src="img/download.png" alt=""/>
                        <p>小米商城APP</p>
                    </aside>
                </li>
                <li><a href="">Select Location</a></li>
            </ul>
            <ul class="header-right">
                <li><a href="">登录</a><span>|</span></li>
                <li><a href="">注册</a><span>|</span></li>
                <li><a href="">消息通知</a></li>
                <li class="cart">
                    <i class="iconfont icon-gouwuche"></i>
                    <a href="">购物车（0）</a>
                    <!-- 语义化标签，也是一个名字是aside的div区域 -->
                    <!-- 鼠标悬停之后的扩展区域 -->
                    <aside>
                        购物车中还没有商品，赶紧选购吧！
                    </aside>
                </li>
            </ul>
        </div>
    </header>
    <!-- 头部区域结束 -->
    <!-- 白色导航开始 -->
    <nav>
        <div class="wrap">
            <!-- logo区域 -->
            <div class="logo">
                <!-- 通过背景图片设置logo -->
                <div class="logo-img"></div>
            </div>
            <div class="nav-bar">
                <!-- 7个，具有滑动门效果 -->
                <ul class="nav-bar-left">
                    <li><a href="">Xiaomi手机</a></li>
                    <li><a href="">REDMi手机</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">平板</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <!-- 存放所有超链接对应的商品列表扩展区域 -->
                    <aside>
                        <div class="wrap">
                            <!-- 6个商品 -->
                            <!-- ul:1226px -->
                            <!-- 6个li和5个竖线 -->
                            <!-- 每个竖线1px -->
                            <!-- (1226 - 5) / 6 = 203.5 -->
                            <ul>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-first-01.webp" alt=""/>
                                        </div>
                                        <p class="item-name">Xiaomi 15</p>
                                        <p class="item-price">4499元起</p>
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-first-02.webp" alt=""/>
                                        </div>
                                        <p class="item-name">Xiaomi 15 Pro</p>
                                        <p class="item-price">5299元起</p>
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-first-03.webp" alt=""/>
                                        </div>
                                        <p class="item-name">Xiaomi 15 定制版</p>
                                        <p class="item-price">4999元起</p>
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-first-04.webp" alt=""/>
                                        </div>
                                        <p class="item-name">Xiaomi MIX Flod 4</p>
                                        <p class="item-price">8999元起</p>
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-first-05.webp" alt=""/>
                                        </div>
                                        <p class="item-name">Xiaomi MIX Flip</p>
                                        <p class="item-price">5999元起</p>
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-first-06.webp" alt=""/>
                                        </div>
                                        <p class="item-name">Xiaomi Civi 4 Pro</p>
                                        <p class="item-price">2799元起</p>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-second-01.webp" alt=""/>
                                        </div>
                                        <p class="item-name">REDMI K80 Pro</p>
                                        <p class="item-price">3699元起</p>
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-second-02.webp" alt=""/>
                                        </div>
                                        <p class="item-name">REDMI K80</p>
                                        <p class="item-price">2499元起</p>
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-second-03.webp" alt=""/>
                                        </div>
                                        <p class="item-name">Redmi Note 14 Pro+</p>
                                        <p class="item-price">1899元起</p>
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-second-04.webp" alt=""/>
                                        </div>
                                        <p class="item-name">Redmi Note 14 Pro</p>
                                        <p class="item-price">1399元起</p>
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-second-05.webp" alt=""/>
                                        </div>
                                        <p class="item-name">Redmi Note 14 5G</p>
                                        <p class="item-price">1099元起</p>
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="">
                                        <div class="item-img">
                                            <img src="img/nav-second-06.webp" alt=""/>
                                        </div>
                                        <p class="item-name">REDMI K70 至尊版</p>
                                        <p class="item-price">2599元起</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </aside>
                </ul>
                <!-- 2个菜单，不具有滑动门效果 -->
                <ul class="nav-bar-right">
                    <li><a href="">服务中心</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <form class="search">
                <input type="text" value="打印机">
                <i class="iconfont icon-sousuo"></i>
                <aside>
                    <p>小米手环9</p>
                    <p>热水器</p>
                    <p>笔记本</p>
                    <p>晾衣架</p>
                    <p>充电宝</p>
                </aside>
            </form>
        </div>
    </nav>
    <!-- 白色导航结束 -->
    <!-- banner区域开始 -->
    <div class="banner">
        <div class="wrap">
            <!-- 可见的banner区域：轮播的图片、侧边栏、左右切换按钮、小圆点按钮 -->
            <div class="banner-box">
                <!-- 所有的轮播图片 -->
                <div class="banner-img">
                    <img src="img/banner-01.jpg" alt=""/>
                    <img src="img/banner-02.jpg" alt=""/>
                    <img src="img/banner-03.jpg" alt=""/>
                    <img src="img/banner-04.jpg" alt=""/>
                    <img src="img/banner-05.jpg" alt=""/>
                    <img src="img/banner-06.jpg" alt=""/>
                </div>
                <!-- 上一张按钮 -->
                <div class="banner-prev"></div>
                <!-- 下一张按钮 -->
                <div class="banner-next"></div>
                <!-- 所有的小圆点 -->
                <ul class="banner-ico">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <!-- 侧边栏 -->
                <ul class="banner-menu">
                    <li>
                        <a>手机</a><i class="iconfont icon-xuanzeqixiayige"></i>
                        <!-- 7个，2列 -->
                        <aside class="item-list item-list-2">
                            <!-- 扩展区域的列数为1-4列，每一列最多6个元素 -->
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="img/slide-01-01.png" alt="">
                                        <span>Xiaomi MIX系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-01-02.png" alt="">
                                        <span>Xiaomi 数字旗舰</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-01-03.png" alt="">
                                        <span>Xiaomi Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-01-04.png" alt="">
                                        <span>Redmi K系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-01-05.png" alt="">
                                        <span>Redmi Turbo系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-01-06.png" alt="">
                                        <span>Redmi Note系列</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="img/slide-01-07.png" alt="">
                                        <span>Redmi 数字系列</span>
                                    </a>
                                </li>
                            </ul>
                        </aside>
                    </li>
                    <li>
                        <a>电视</a><i class="iconfont icon-xuanzeqixiayige"></i>
                        <aside class="item-list item-list-3">
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-02-01.png" alt="">
                                        <span>小米电视 S Pro Mini LED</span>
                                    </a>
                                </li>
                            </ul><ul>
                            <li>
                                <a href="">
                                    <img src="img/slide-02-01.png" alt="">
                                    <span>小米电视 S Pro Mini LED</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="img/slide-02-01.png" alt="">
                                    <span>小米电视 S Pro Mini LED</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="img/slide-02-01.png" alt="">
                                    <span>小米电视 S Pro Mini LED</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="img/slide-02-01.png" alt="">
                                    <span>小米电视 S Pro Mini LED</span>
                                </a>
                            </li>
                        </ul>
                        </aside>
                    </li>
                    <li>
                        <a>家电</a><i class="iconfont icon-xuanzeqixiayige"></i>
                        <!-- 6 * 4 = 24个 -->
                        <aside class="item-list item-list-4">
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <img src="img/slide-03-01.png" alt="">
                                        <span>壁挂空调</span>
                                    </a>
                                </li>
                            </ul>
                        </aside>
                    </li>
                    <li><a>笔记本&nbsp;平板&nbsp;显示器</a><i class="iconfont icon-xuanzeqixiayige"></i></li>
                    <li><a>出行 穿戴</a><i class="iconfont icon-xuanzeqixiayige"></i></li>
                    <li><a>耳机 音箱</a><i class="iconfont icon-xuanzeqixiayige"></i></li>
                    <li><a>健康 儿童</a><i class="iconfont icon-xuanzeqixiayige"></i></li>
                    <li><a>生活 箱包</a><i class="iconfont icon-xuanzeqixiayige"></i></li>
                    <li><a>智能 路由器</a><i class="iconfont icon-xuanzeqixiayige"></i></li>
                    <li><a>电源 配件</a><i class="iconfont icon-xuanzeqixiayige"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- banner区域结束 -->
    <!-- 广告区域开始 -->
    <div class="ad">
        <div class="wrap">
            <ul>
                <li>
                    <a href="">
                        <img src="img/ad-ico-1.png" alt="">
                        <p>保障服务</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/ad-ico-2.png" alt="">
                        <p>企业团购</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/ad-ico-3.png" alt="">
                        <p>F码通道</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/ad-ico-4.png" alt="">
                        <p>米粉卡</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/ad-ico-5.png" alt="">
                        <p>以旧换新</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/ad-ico-6.png" alt="">
                        <p>话费充值</p>
                    </a>
                </li>
            </ul>
            <a href="">
                <img src="img/ad-item-1.png" alt="">
            </a>
            <a href="">
                <img src="img/ad-item-2.png" alt="">
            </a>
            <a href="">
                <img src="img/ad-item-3.png" alt="">
            </a>
        </div>
    </div>
    <!-- 广告区域结束 -->

    <!-- 主体区域开始 -->
    <div class="main">
        <div class="wrap">
            <!-- 单张大图 -->
            <div class="main-top">
                <a href="">
                    <img src="img/main-top.jpg" alt="">
                </a>
            </div>

            <!-- 手机推荐区域 -->
            <div class="phone">
                <h3 class="title">
                    手机
                    <a href="" class="more">
                        查看更多
                        <i class="iconfont icon-xiayiyehouyiye"></i>
                    </a>
                </h3>
                <div class="goods-box">
                    <div class="goods-box-left">
                        <a href="">
                            <img src="img/phone-main.png" alt="">
                        </a>
                    </div>
                    <ul class="goods-box-right">
                        <li>
                            <a href="">
                                <img src="img/phone-item1.png" alt="">
                                <p class="goods-name">REDMI K80 Pro</p>
                                <p class="goods-desc">骁龙8至尊版|2K新国屏|全焦段影像</p>
                                <p class="goods-price">3699元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/phone-item2.png" alt="">
                                <p class="goods-name">REDMI K80</p>
                                <p class="goods-desc">第三代骁龙8|2K新国屏|6550mAh 超长续航</p>
                                <p class="goods-price">2499元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/phone-item3.png" alt="">
                                <p class="goods-name">Xiaomi 15</p>
                                <p class="goods-desc"> 徕卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                                <p class="goods-price">4499元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/phone-item4.png" alt="">
                                <p class="goods-name">Xiaomi 15 Pro</p>
                                <p class="goods-desc">徕卡光学 Summilux 高速镜头｜ 骁龙®8至尊版移动平台｜6100mAh 小米金沙江电池｜小米澎湃OS 2</p>
                                <p class="goods-price">3699元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/phone-item5.png" alt="">
                                <p class="goods-name">Xiaomi 15 定制版</p>
                                <p class="goods-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                                <p class="goods-price">4999元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/phone-item6.png" alt="">
                                <p class="goods-name">Redmi Note 14 Pro+</p>
                                <p class="goods-desc">第三代骁龙®7s</p>
                                <p class="goods-price">
                                    1899元起
                                    <del>
                                        1999元起
                                    </del>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/phone-item7.png" alt="">
                                <p class="goods-name">Redmi Note 14 Pro</p>
                                <p class="goods-desc">天玑 7300-Ultra</p>
                                <p class="goods-price">
                                    1399元起
                                    <del>
                                        1499元起
                                    </del>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/phone-item8.png" alt="">
                                <p class="goods-name">Redmi K70 至尊版</p>
                                <p class="goods-desc">性能魔王  全面进化</p>
                                <p class="goods-price">2599元起</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 智能穿戴推荐区域 -->
            <div class="smart-wear">
                <h3 class="title">
                    智能穿戴
                    <div class="more">
                        <a href="" class="tab-active">耳机</a>
                        <a href="">穿戴</a>
                    </div>
                </h3>
                <div class="goods-box">
                    <div class="goods-box-left">
                        <a href="">
                            <img src="img/smart-main.png" alt="">
                        </a>
                    </div>
                    <!-- 耳机 -->
                    <ul class="goods-box-right">
                        <li>
                            <a href="">
                                <img src="img/headset-item1.png" alt="">
                                <p class="goods-name">REDMI Buds 6 Pro</p>
                                <p class="goods-desc">小米首发圈瓷同轴三单元 | 55dB深度降噪 | 无级动态降噪技术</p>
                                <p class="goods-price">399元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item2.png" alt="">
                                <p class="goods-name">REDMI K80</p>
                                <p class="goods-desc">第三代骁龙8|2K新国屏|6550mAh 超长续航</p>
                                <p class="goods-price">2499元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item3.png" alt="">
                                <p class="goods-name">Xiaomi 15</p>
                                <p class="goods-desc"> 徕卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                                <p class="goods-price">4499元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item4.png" alt="">
                                <p class="goods-name">Xiaomi 15 Pro</p>
                                <p class="goods-desc">徕卡光学 Summilux 高速镜头｜ 骁龙®8至尊版移动平台｜6100mAh 小米金沙江电池｜小米澎湃OS 2</p>
                                <p class="goods-price">3699元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item5.png" alt="">
                                <p class="goods-name">Xiaomi 15 定制版</p>
                                <p class="goods-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                                <p class="goods-price">4999元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item6.png" alt="">
                                <p class="goods-name">Redmi Note 14 Pro+</p>
                                <p class="goods-desc">第三代骁龙®7s</p>
                                <p class="goods-price">
                                    1899元起
                                    <del>
                                        1999元起
                                    </del>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item7.png" alt="">
                                <p class="goods-name">Redmi Note 14 Pro</p>
                                <p class="goods-desc">天玑 7300-Ultra</p>
                                <p class="goods-price">
                                    1399元起
                                    <del>
                                        1499元起
                                    </del>
                                </p>
                            </a>
                        </li>
                        <li class="goods-right-last">
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="img/headset-item8.png" alt="">
                                        <p class="goods-name">Redmi Buds 5 Pro</p>
                                        <p class="goods-price">399元起</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="more-icon">
                                            <i class="iconfont icon-xiangyou2"></i>
                                        </div>
                                        <div class="more-text">
                                            浏览更多
                                            <small>耳机</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <!-- 穿戴 -->
                    <ul class="goods-box-right">
                        <li>
                            <a href="">
                                <img src="img/watch-item1.png" alt="">
                                <p class="goods-name">REDMI Buds 6 Pro</p>
                                <p class="goods-desc">小米首发圈瓷同轴三单元 | 55dB深度降噪 | 无级动态降噪技术</p>
                                <p class="goods-price">399元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item2.png" alt="">
                                <p class="goods-name">REDMI K80</p>
                                <p class="goods-desc">第三代骁龙8|2K新国屏|6550mAh 超长续航</p>
                                <p class="goods-price">2499元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item3.png" alt="">
                                <p class="goods-name">Xiaomi 15</p>
                                <p class="goods-desc"> 徕卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                                <p class="goods-price">4499元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item4.png" alt="">
                                <p class="goods-name">Xiaomi 15 Pro</p>
                                <p class="goods-desc">徕卡光学 Summilux 高速镜头｜ 骁龙®8至尊版移动平台｜6100mAh 小米金沙江电池｜小米澎湃OS 2</p>
                                <p class="goods-price">3699元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item5.png" alt="">
                                <p class="goods-name">Xiaomi 15 定制版</p>
                                <p class="goods-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                                <p class="goods-price">4999元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item6.png" alt="">
                                <p class="goods-name">Redmi Note 14 Pro+</p>
                                <p class="goods-desc">第三代骁龙®7s</p>
                                <p class="goods-price">
                                    1899元起
                                    <del>
                                        1999元起
                                    </del>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/headset-item7.png" alt="">
                                <p class="goods-name">Redmi Note 14 Pro</p>
                                <p class="goods-desc">天玑 7300-Ultra</p>
                                <p class="goods-price">
                                    1399元起
                                    <del>
                                        1499元起
                                    </del>
                                </p>
                            </a>
                        </li>
                        <li class="goods-right-last">
                            <ul>
                                <li>
                                    <a href="">
                                        <img src="img/watch-item8.png" alt="">
                                        <p class="goods-name">小米手环8 Pro 原神定制版</p>
                                        <p class="goods-price">549元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="more-icon">
                                            <i class="iconfont icon-xiangyou2"></i>
                                        </div>
                                        <div class="more-text">
                                            浏览更多
                                            <small>穿戴</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 单张大图 -->
            <div class="main-top">
                <a href="">
                    <img src="img/main-bottom.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
    <!-- 主体区域结束 -->

    <!-- 底部区域开始 -->
    <footer>
        <div class="wrap">
            <ul class="footer-service">
                <li>
                    <a href="">
                        <i class="iconfont icon-banshou"></i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-footer-7"></i>
                        <span>7天无理由退货</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-tian"></i>
                        <span>15天免费换货</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-liwu"></i>
                        <span>满69包邮</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-weizhi"></i>
                        <span>1100余家售后网点</span>
                    </a>
                </li>
            </ul>
            <div class="footer-link">
                <ul>
                    <li>选购指南</li>
                    <li><a href="">手机</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">平板</a></li>
                    <li><a href="">穿戴</a></li>
                    <li><a href="">耳机</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">音箱</a></li>
                    <li><a href="">配件</a></li>
                </ul>
                <ul>
                    <li>服务中心</li>
                    <li><a href="">申请售后</a></li>
                    <li><a href="">售后政策</a></li>
                    <li><a href="">维修服务价格</a></li>
                    <li><a href="">订单查询</a></li>
                    <li><a href="">以旧换新</a></li>
                    <li><a href="">保障服务</a></li>
                    <li><a href="">防伪查询</a></li>
                    <li><a href="">F码通道</a></li>
                </ul>
                <ul>
                    <li>线下门店</li>
                    <li><a href="">小米之家</a></li>
                    <li><a href="">服务网点</a></li>
                    <li><a href="">授权体验店/专区</a></li>
                </ul>
                <ul>
                    <li>关于小米</li>
                    <li><a href="">了解小米</a></li>
                    <li><a href="">加入小米</a></li>
                    <li><a href="">投资者关系</a></li>
                    <li><a href="">可持续发展</a></li>
                    <li><a href="">廉洁举报</a></li>
                </ul>
                <ul>
                    <li>关注我们</li>
                    <li><a href="">新浪微博</a></li>
                    <li><a href="">官方微博</a></li>
                    <li><a href="">联系我们</a></li>
                    <li><a href="">公益基金会</a></li>
                </ul>
                <div class="footer-aside">
                    <div class="footer-aside-top">
                        <p class="phone-number">400-100-5678</p>
                        <p class="work-time">8:00-18:00（仅收市话费）</p>
                        <a href="">
                            <i class="iconfont icon-pinglun"></i>人工客服
                        </a>
                    </div>
                    <div class="footer-aside-bottom">
                        <p class="phone-number">400-180-8888</p>
                        <div>
                            <p class="work-time">8:00-18:00（仅收市话费）</p>
                            <p class="work-time">适用于：MIX FOLD、巨屏电视系列</p>
                        </div>
                        <a href="">
                            <i class="iconfont icon-pinglun"></i>人工客服
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- 底部区域开始 -->

    <!-- 版权区域开始 -->
    <div class="site">
        <div class="wrap">
            <div>
                <!-- logo -->
                <div class="logo">
                    <div class="logo-img"></div>
                </div>
                <!-- 文本链接 -->
                <div class="site-text">
                    <p class="sites">
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米澎湃OS</a>
                        <span>|</span>
                        <a href="">米家</a>
                        <span>|</span>
                        <a href="">多看</a>
                        <span>|</span>
                        <a href="">游戏</a>
                        <span>|</span>
                        <a href="">音乐</a>
                        <span>|</span>
                        <a href="">政企服务</a>
                        <span>|</span>
                        <a href="">小米天猫店</a>
                        <span>|</span>
                        <a href="">小米集团隐私政策</a>
                        <span>|</span>
                        <a href="">小米公司儿童信息保护规则</a>
                        <span>|</span>
                        <a href="">小米商城隐私政策</a>
                        <span>|</span>
                        <a href="">小米商城用户协议</a>
                        <span>|</span>
                        <a href="">问题反馈</a>
                        <span>|</span>
                        <a href="">Select Location</a>
                    </p>
                    <p class="sites">
                        <a href="">北京互联网法院法律服务工作站</a>
                        <span>|</span>
                        <a href="">中国消费者协会</a>
                        <span>|</span>
                        <a href="">北京市消费者协会</a>
                    </p>
                    <p class="sites">
                        &copy;
                        <a href="">mi.com</a>
                        京ICP证110507号
                        <a href="">京ICP备10046444号</a>
                        <a href="">京公网安备11010802020134号</a>
                        <a href="">京网文[2023]0169-004号</a>
                        <br>
                        <a href="">（京）网械平台备字（2018）第00005号</a>
                        <a href="">药品医疗器械网络信息服务备案 (京)网药械信息备字（2024）第00478号</a>
                        <a href="">营业执照</a>
                        <a href="">医疗器械质量公告</a>
                        <br>
                        <a href="">增值电信业务经营许可证编号：京B2-20180851</a>
                        网络食品经营备案 京食药网食备202010048
                        <a href="">食品经营许可证</a>
                        新出发京批字第直220280号
                        <br>
                        违法和不良信息举报电话：171-5104-4404
                        <a href="">知识产权侵权投诉</a>
                        本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                    </p>
                </div>
            </div>

            <!-- 图标 -->
            <div class="site-icon">
                <a href="">
                    <img src="img/site-icon-1.png" alt="">
                </a>
                <a href="">
                    <img src="img/site-icon-2.png" alt="">
                </a>
                <a href="">
                    <img src="img/site-icon-3.png" alt="">
                </a>
                <a href="">
                    <img class="link-img" src="img/site-icon-4.png" alt="">
                    <img class="link-img" src="img/site-icon-5.png" alt="">
                </a>
            </div>

            <!-- 标语 -->
            <div class="slogan"></div>
        </div>
    </div>
    <!-- 版权区域结束 -->

    <!-- 右侧工具栏区域开始 -->
    <div class="right-tools">
        <ul>
            <li>
                <a href="">
                    <div>
                        <img src="img/tool-shoujiapp.png" alt="">
                        <img src="img/tool-shoujiapp-hover.png" alt="">
                    </div>
                    <p>手机APP</p>
                </a>
            </li>
            <li>
                <a href="">
                    <div>
                        <img src="img/tool-gerenzhongxin.png" alt="">
                        <img src="img/tool-gerenzhongxin-hover.png" alt="">
                    </div>
                    <p>个人中心</p>
                </a>
            </li>
            <li>
                <a href="">
                    <div>
                        <img src="img/tool-shouhoufuwu.png" alt="">
                        <img src="img/tool-shouhoufuwu-hover.png" alt="">
                    </div>
                    <p>售后服务</p>
                </a>
            </li>
            <li>
                <a href="">
                    <div>
                        <img src="img/tool-rengongkefu.png" alt="">
                        <img src="img/tool-rengongkefu-hover.png" alt="">
                    </div>
                    <p>人工客服</p>
                </a>
            </li>
            <li>
                <a href="">
                    <div>
                        <img src="img/tool-gouwuche.png" alt="">
                        <img src="img/tool-gouwuche-hover.png" alt="">
                    </div>
                    <p>购物车</p>
                </a>
            </li>
        </ul>
        <ul class="return-top">
            <li>
                <a href="">
                    <div>
                        <img src="img/tool-totop.png" alt="">
                        <img src="img/tool-totop-hover.png" alt="">
                    </div>
                    <p>回顶部</p>
                </a>
            </li>
        </ul>
    </div>
    <!-- 右侧工具栏区域结束 -->
</body>
</html>